<template>
  <div class="page">
    <div class="J-inlet">
        <!--<div class="horn line-bottom">请勿在油机旁使用手机</div>-->
        <div class="pos color-2">你的当前位置: {{getGasstationInfo.gsName}}</div>
        <div class="weui-cell" :class="warning?'weui-cell_warn':''">
          <div class="weui-cell__hd"><label class="weui-label">油枪</label></div>
          <div class="weui-cell__bd pl">
            <span class="w-input" :class="{active:!isKeyboardShow}">{{youqiangVal}}</span>
            <input class="weui-input" type="tel" :class="{active:youqiangVal}" v-model="youqiangVal"  readonly @click="clickInput('yq')" placeholder="请输入油枪号">
          </div>
          <div class="weui-cell__ft" v-if="warning">
            <i class="weui-icon-warn"></i>
          </div>
        </div>
        <div class="weui-cell line-bottom pl" :class="{priceActive:youqiangVal == '' || warning ,active:priceVal !== ''}">
          <div class="weui-cell__hd">
            <label class="weui-label">金额</label>
          </div>
          <div class="weui-cell__bd pl">
            <span class="w-input" :class="{active:isKeyboardShow}">{{priceVal}}</span>
            <input class="weui-input" type="tel" v-model="priceVal" :class="{active:priceVal}" @click="clickInput('price')" readonly placeholder="加油金额(10-9999)">
          </div>
        </div>
        <div class="weui-flex menu" :class="{priceMenu:isMenu}">
          <div class="weui-flex__item" v-for='(item,index) in price'>
            <div class="_number_" @click="setActive(index)">
              <span class="price">{{item.name}}</span>
            </div>
          </div>
        </div>
    </div>
    <div class="J-inlet-tis color-2 line-top" v-show="isTis">
      <div v-show="getGasNoInfo.code == 404">
        <span class="color-3">{{getGasNoInfo.msg}}</span>
      </div>
      <div v-show="getGasNoInfo.gsGunNo && getGasNoInfo.gsGunNoName">
        <span class="color-1">{{getGasNoInfo.gsGunNo}}号</span>油枪,
        <span class="color-1">{{getGasNoInfo.gsGunNoName}}</span><br><span v-if="getRealPrice.couponPrice>0 && priceVal">优惠
        <span class="color-3">{{getRealPrice.couponPrice}}</span> 元, <span v-html="getRealPrice.discountType"></span></span>
      </div>
    </div>
    <keyboard :keyboardtext="priceVal" :cart-info="cartInfo" @on-keyboard-change="keyboardChange"
              v-if="isKeyboardShow" :payActive="payActive"></keyboard>
    <keyboard :keyboardtext="youqiangVal" @on-keyboard-change="keyboardChange"
              v-if="!isKeyboardShow" :payActive="payActive"></keyboard>
  </div>
</template>
<script>
  import keyboard from '~components/mixins/keyboard.vue'
  import { mapGetters } from 'vuex'
  export default {
    name: 'inlet',
    data () {
      return {
        isMenu: false,
        activeFixd: false,
        payActive: false,
        isKeyboardShow: false,
        priceVal: '',
        warning: false,  // 提示
        youqiangVal: '',
        config: {
          gsId: this.$route.query.id,
          gsGunNo: ''
        },
        cartInfo:{},
        isTis:false,
        price: [{
          name: '100'
        }, {
          name: '200'
        }, {
          name: '300'
        }, {
          name: '400'
        }]
      }
    },
    components: {
      keyboard
    },
    computed: {
      ...mapGetters({
        getGasstationInfo: 'getGasstationInfo',
        getGasNoInfo: 'getGasNoInfo',
        getRealPrice:'getRealPrice'
      })
    },
    mounted () {
      if (this.getGasstationInfo) {
        this.$store.dispatch('getGasstationInfo', this.config.gsId)
      }
    },
    watch: {
      priceVal (cVal) {
        if (cVal) {
          this.getPrice(cVal)
        }
      },
      'getGasNoInfo.code' (val) {
        if (val =='404') {
          this.warning = true
        } else {
          this.warning = false
        }
      },
      youqiangVal (cVal) {
        if (cVal) {
          this.isTis = true
          if (this.getGasNoInfo.code =='404') {
            this.warning = true
          }
          this.getNoInfo(cVal)
        }else{
          this.isTis = false
          this.warning = false
        }
      },
      getRealPrice(val) {
        if (val) {
          this.cartInfo = {
            gsId:this.getGasNoInfo.gsId,
            gsNoId:this.getGasNoInfo.gsNoId,
            gsGunNo:this.getGasNoInfo.gsGunNo,
            gsPrice:this.getGasNoInfo.gsPrice,
            gsName: this.getGasNoInfo.gsName,
            //判断有没有非油品
            otherNoGasId:this.getGasstationInfo.otherGoods?this.getGasstationInfo.otherGoods.id:0,
            itemName:this.getGasstationInfo.otherGoods?this.getGasstationInfo.otherGoods.itemName:'',
            couponPrice: val.couponPrice,
            GunNoName: this.getGasNoInfo.gsGunNoName,
            RealPrice: val.gsPrice,
            discountPrice:val.discountPrice,
            payPrice:val.gsPrice - val.couponPrice
          }
        }
      }
    },
    methods: {
      getNoInfo (id) {
        var _this = this
        var config = {
          id: this.$route.query.id || '26',
          gsGunNo: id
        }
        _this.$store.dispatch('getGasNoInfo', config)
      },
      getPrice (price) {
        var _this = this
        var config = {
          id: this.$route.query.id || '26',
          gsGunNo: this.getGasNoInfo.gsNoId,   //提交gsNoId
          gsPrice: price
        }
        _this.$store.dispatch('getRealPrice', config)
      },
      setActive (index) {
        var _this = this
        _this.price.map(function (v, i) {
          if (i === index) {
            _this.priceVal = v.name
            _this.isMenu = false
          }
        })
      },
      openMenu () {
        if (this.priceVal !== '') {
          this.isMenu = false
          return
        }
        this.isMenu = true
      },
      closeMenu () {
        this.isMenu = false
      },
      clickInput (key) {
        if (key === 'price') {
          if (!this.isKeyboardShow && (this.youqiangVal === '' || this.warning)) {   //没油此油枪
            return
          }
          this.openMenu()
          this.isKeyboardShow = true
        } else {
          this.closeMenu()
          this.isKeyboardShow = false
        }
      },
      keyboardChange (val) {
        if (!this.isKeyboardShow) {
          this.youqiangVal = val
        } else {
          if (val === '') {
            this.isMenu = true
          } else {
            this.isMenu = false
          }
          this.priceVal = val
        }
        if (this.priceVal !== '' && this.youqiangVal !== '') {
          this.payActive = true
        } else {
          this.payActive = false
        }
      }
    }
  }
</script>
<style lang="scss">
@keyframes cursor {
  0% { opacity:1; }
  50% { opacity:0; }
  100% { opacity:1; }
}
@-webkit-keyframes cursor {
  0% { opacity:1; }
  50% { opacity:0; }
  100% { opacity:1; }
}
.J-inlet-tis{
  font-size:12px;
  padding:8px 10px;
  .color-1{
    padding:0 2px;
  }
}
.J-inlet{
  background-color:#fff;
  overflow:hidden;

  .weui-cell{
    padding:8px 15px;
    height:26px;
    .weui-cell__bd{
      height:22px;
    }
    .weui-input{
      position:absolute;
      /*opacity:0;*/
      font-size:18px;
      top:-2px;
      left:0;
      right:0;
    }
    .w-input{
      height:25px;
      position:absolute;
      left:0;
      top:-2px;
      right:0;
    }
    .weui-input.active{
      opacity:0;
    }
    .w-input.active{
      &:after{
        content: '';
        display: inline-block;
        width:2px;
        height:18px;
        position: relative;
        top:2px;
        background-color:#666;
        animation: cursor 1s linear infinite;
        -webkit-animation: cursor 1s linear infinite;
      }
    }
  }

  .weui-flex.menu{
    height:0;
    transition: height .3s;
    -webkit-transition: height .3s;
  }
  .weui-flex.priceMenu{
    height:45px;
  }
  .priceActive{
    color:#e4e0e0;
    .weui-input::-webkit-input-placeholder{
      color:#e4e0e0
    }
  }
  .weui-cell__ft:after{
    display: none;
  }
  ._number_{
    text-align: center;
    margin:10px 0;
    .price{
      font-size:14px;
      margin:0 10px;
      background-color:#eee;
      padding:6px 15px;
      border-radius:4px;
      -weikit-border-radius:4px;
    }
  }
  ._number_.active{
    .price {
      background-color: #09BB07;
      color:#fff;
    }
  }
  .weui-cell{
    font-size:18px;
  }
  .weui-label{
    font-size:18px;
  }
  .weui-cell:before{
    left: 0px;
  }
  .pos{
    position: relative;
    font-size:14px;
    padding:8px 10px;
  }
  .horn{
    font-size:14px;
    padding:8px 10px;
    position: relative;
    &:before{
      content: '';
      display:inline-block;
      width:16px;
      height: 16px;
      background-color:red;
      background-image: url("/static/images/horn.png");
      background-size: 12px 12px;
      background-repeat: no-repeat;
      border-radius: 2px;
      -weikit-border-radius:2px;
      margin-top:3px;
      margin-right:5px;
      float: left;
      background-position:center center;
    }
  }
}
</style>
